<template>
  <div class="hello">
    <section>
      <el-carousel height="250px">
        <el-carousel-item v-for="(carousel,id) in carousel" :key="id">
          <div style="height:250px;position:relative">
            <a :href="carousel.carousel_url" target="_blank">
              <div class="carouseltitle">
                {{carousel.carousel_title}}
              </div>
              <img :src="carousel.carousel_img" alt class="carouselimg"/>
            </a>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      carousel: []
    }
  },
  methods: {
    async CarouselList () {
      console.log('轮播图')
      const result = await this.$axios.post('/admin/carousellist', this.qs.stringify({ lable_name: '' })
      )
      if (result.data.state.type === 'SUCCESS') {
        this.carousel = result.data.data
        console.log('轮播数据')
        console.log(this.carousel)
      }
    }
  },
  created () {
    this.CarouselList()
  }
}
</script>

<style scoped>
  .carouselimg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carouseltitle {
    position: absolute;
    left: 0px;
    bottom: 4px;
    width: 100%;
    height: 30px;
    background-color: aliceblue;
    font-size: 20px;
    opacity: 0.4;
    font-weight: 800;
    color: black;
    line-height: 30px;
  }
</style>
